<template>
  <div class="app-container">
    <el-form ref="form" :rules="rules" :model="refueling" label-width="80px">
      <el-form-item label="车牌号码" prop="carId">
        <template>
          <el-select v-model="refueling.carId" @change="getInfo" clearable placeholder="请选择">
            <el-option
              v-for="item in carList"
              :key="item.id"
              :label="item.carNo"
              :value="item.id"

            >
            </el-option>
          </el-select>
        </template>
      </el-form-item>


      <el-form-item label="加油站" prop="oilStationId">
        <template>
          <el-select v-model="refueling.oilStationId" clearable placeholder="请选择">
            <el-option
              v-for="item in currentUnits"
              :key="item.id"
              :label="item.unitName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </template>
      </el-form-item>

      <el-form-item label="加油时间" prop="oilDate">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="refueling.oilDate"
                          style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>


      <el-form-item label="油料标号" prop="oilLabel">
        <template>
          <el-select v-model="refueling.oilLabel" clearable placeholder="请选择">
            <el-option
              v-for="item in dictionaries"
              :key="item.id"
              :label="item.text"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </template>
      </el-form-item>

      <el-form-item label="油料单价(每升)" prop="unitPrice">
        <el-input v-model="refueling.unitPrice"></el-input>
      </el-form-item>

      <el-form-item label="本次加油(升)" prop="thisGasVolume">
        <el-input v-model="refueling.thisGasVolume"></el-input>
      </el-form-item>

      <el-form-item label="加油总价" prop="totalAmount">
        <el-input v-model="refueling.totalAmount=refueling.unitPrice*refueling.thisGasVolume"></el-input>
      </el-form-item>

      <el-form-item label="本次里程(公里)" prop="thisMil">
        <el-input v-model="refueling.thisMil"></el-input>
      </el-form-item>


      <el-form-item label="上次里程(公里)" prop="lastMil">
        <el-input v-model="refueling.lastMil"></el-input>
      </el-form-item>


      <el-form-item label="上次加油(升)" prop="lastGasVolume">
        <el-input v-model="refueling.lastGasVolume"></el-input>
      </el-form-item>


      <el-form-item label="备注" prop="remarks">
        <el-input v-model="refueling.remarks"></el-input>
      </el-form-item>


      <el-form-item label="加油人员" prop="operator">
        <template>
          <el-select v-model="refueling.operator" clearable placeholder="请选择">
            <el-option
              v-for="item in driverList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </template>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          @click="saveRefuel()"
        >保存记录
        </el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import RefuelApi from "@/api/refueling.js"

  export default {
    name: "refuelingadd",
    data() {
      return {
        carList: {},
        dictionaries: {},
        currentUnits: {},
        driverList: {},
        refueling: {
          carId: "",
          oilStationId: "",
          oilDate: "",
          oilLabel: "",
          unitPrice: "",
          totalAmount: "",
          thisMil: "",
          lastMil: "",
          thisGasVolume: "",
          lastGasVolume: "",
          operator: "",
          remarks: "",
        },
        rules: {
          carId: [
            {required: true, message: '请选择车牌号码', trigger: 'change'}
          ],
          oilStationId: [
            {required: true, message: '请选择加油站', trigger: 'change'}
          ],
          oilDate: [
            {required: true, message: '请选择加油时间', trigger: 'change'}
          ],
          oilLabel: [
            {required: true, message: '请选择油料标号', trigger: 'change'}
          ],
          unitPrice: [
            {required: true, message: '请输入油料单价(每升)', trigger: 'blur'}
          ],
          thisGasVolume: [
            {required: true, message: '请输入本次加油(升)', trigger: 'blur'}
          ],
          operator: [
            {required: true, message: '请选择加油人员', trigger: 'change'}
          ],
          thisMil: [
            {required: true, message: '请输入本次里程', trigger: 'blur'}
          ]
        }
      }
    },
    created() {
      this.findAll()
    },
    methods: {
      saveRefuel() {
        RefuelApi.saveRefuel(this.refueling).then(response => {
          this.$message({
            message: "添加成功",
            type: "success"
          })
          this.$router.push({path: "/daily_work/refuelinglist"})
        })
      },
      findAll() {
        RefuelApi.findAll().then(response => {
          this.carList = response.data.carList
          this.dictionaries = response.data.dictionaries
          this.currentUnits = response.data.currentUnits
          this.driverList = response.data.driverList
        })
      },
      getInfo(data){
        console.log(data)
        RefuelApi.findById(data).then(response=>{
          this.refueling.unitPrice = response.data.unitPrice
          this.refueling.oilLabel = response.data.oilLabel
          this.refueling.lastMil = response.data.thisMil
          this.refueling.lastGasVolume = response.data.thisGasVolume
        })
      }
    }
  }
</script>

<style scoped>

</style>
